<template>
  <div class="mod-member-level">
    <el-data-table ref="dataTableRef" :criterias="table.criterias" name="memberlevel" :initLoad="true" url="/member/level/select">
      <!-- ----------------------------------------- 查询条件 ----------------------------------------- -->
      <template v-slot:search="criterias">
        <el-search-item label="检索内容">
          <el-input v-model="criterias.name.value" placeholder="请输入等级名称" clearable></el-input>
        </el-search-item>
      </template>
      <!-- ------------------------------------------ 工具栏 ------------------------------------------ -->
      <template v-slot:toolbar>
        <el-button-group>
          <el-button v-if="admin.isAuth('member:level:save')" @click="() => addDataEvent()" type="primary">
            新增
          </el-button>
          <el-button v-if="admin.isAuth('member:level:save')" @click="() => updateDataEvent()" type="warning">
            修改
          </el-button>
          <el-button v-if="admin.isAuth('member:level:delete')" @click="() => deleteDataEvent()" type="danger">
            删除
          </el-button>
        </el-button-group>
      </template>
      <!-- ---------------------------------------- 数据表格列 ---------------------------------------- -->
      <el-table-column fixed prop="name" header-align="center" align="center" label="等级名称" width="160" />
      <el-table-column prop="growthPoint" header-align="center" align="center" label="所需成长值" width="160" />
      <el-table-column prop="defaultStatus" header-align="center" align="center" label="默认等级" width="120">
        <template #default="scope">
          <el-tag v-if="scope.row.defaultStatus === 0" size="small" type="info">不是</el-tag>
          <el-tag v-else size="small">是</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="freeFreightPoint" header-align="center" align="right" label="免运费标准" width="180" />
      <el-table-column prop="commentGrowthPoint" header-align="center" align="center" label="评论获取成长值" width="180" />
      <el-table-column header-align="center" label="特权">
        <el-table-column prop="priviledgeFreeFreight" header-align="center" align="center" label="免邮" width="120">
          <template #default="scope">
            <el-tag v-if="scope.row.priviledgeFreeFreight === 0" size="small" type="info">不是</el-tag>
            <el-tag v-else size="small">是</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="priviledgeMemberPrice" header-align="center" align="center" label="会员价格" width="120">
          <template #default="scope">
            <el-tag v-if="scope.row.priviledgeMemberPrice === 0" size="small" type="info">不是</el-tag>
            <el-tag v-else size="small">是</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="priviledgeBirthday" header-align="center" align="center" label="生日" width="120">
          <template #default="scope">
            <el-tag v-if="scope.row.priviledgeBirthday === 0" size="small" type="info">不是</el-tag>
            <el-tag v-else size="small">是</el-tag>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column prop="desct" show-overflow-tooltip header-align="center" align="left" label="备注" width="260" />
    </el-data-table>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateRef" @loadTableData="loadTableData"></add-or-update>
  </div>
</template>

<script lang="ts" setup>
import admin from "@/utils/admin";
import { ref, nextTick, reactive } from "vue";

import AddOrUpdate from "./level-add-or-update.vue";

// 表格数据
const table = reactive({
  criterias: {
    name: {
      type: "ll",
      value: "",
    },
  },
});

// 数据表格引用
const dataTableRef = ref();

// 弹窗引用
const addOrUpdateRef = ref();

// 新增修改弹窗是否显示
const addOrUpdateVisible = ref(false);

// 新增
const addDataEvent = async () => {
  addOrUpdateVisible.value = true;
  await nextTick();
  addOrUpdateRef.value.initForm("add");
};

// 修改
const updateDataEvent = async () => {
  let data = admin.obtainOneSelectionTableData(dataTableRef.value);
  if (!data) {
    return;
  }
  addOrUpdateVisible.value = true;
  await nextTick();
  addOrUpdateRef.value.initForm("update", data);
};

// 删除
const deleteDataEvent = () => {
  admin.batchDeleteSelectionTableData(dataTableRef.value, "/member/level/delete");
};

// 表格数据加载
const loadTableData = () => {
  dataTableRef.value.loadTableData();
};
</script>
